<!-- 目前仅产品管理搜索栏需要 -->
<template>
  <div class="type">
    <main class="type-container">
      <h4 class="mr30">所属类型：</h4>
      <nav
        class="mr20"
        :class="activeIdx === index ? 'active' : ''"
        v-for="(item, index) in navList"
        :key="index"
        @click="changeNav(index)"
      >
        {{ item.label }}
      </nav>
    </main>
  </div>
</template>

<script>
export default {
  name: 'BaseType',
  props: {
    activeIdx: Number,
    activeValue: [Number, String],
    onSwitchType: Function,
    navList: Array,
  },
  data() {
    return {}
  },
  methods: {
    changeNav(index) {
      if (this.onSwitchType) {
        console.log(1111)
        this.onSwitchType(index, this.navList[index].value)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.type {
  &-container {
    @include flex;
    border-bottom: 1px dashed #c0c4cc;
    padding-bottom: 30px;
    margin-bottom: 20px;
    padding-top: 10px;
    > nav {
      text-align: center;
      line-height: 40px;
      width: 86px;
      height: 40px;
      cursor: pointer;
    }
  }
}
.active {
  color: $white;
  background: $blue-lighter;
  width: 86px;
  height: 40px;
  border-radius: 20px;
}
</style>
